<template>
  <div>
    <el-dialog
      :before-close="handleClose"
      :show="show"
      :visible.sync="visible"
      title="查看视频"
      width="70%"
    >

      <el-row :gutter="20">
        <el-col :span="18">

          <el-row>
            <el-col>
              <div class="player-container">
                <div id="glplayer" class="glplayer"></div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3">拉流地址:</el-col>
            <el-col :span="21">{{ mediaObject.mrl }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3">
              <el-radio v-model="radio" :span="3" label="flv" title="播放flv格式"> flv</el-radio>
            </el-col>
            <el-col :span="21">
              <el-input
                v-model="mediaObject.flv"
                :readonly="true"
                :span="9"
                prefix-icon="el-icon-video-camera"
                size="mini"
                style="width:80%"
              />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3">
              <el-radio v-model="radio" :span="3" disabled label="hls" title="播放hls格式，延迟较大"> hls</el-radio>
            </el-col>
            <el-col :span="21">
              <el-input
                v-model="mediaObject.hls"
                :readonly="true"
                :span="9"
                prefix-icon="el-icon-video-camera"
                size="mini"
                style="width:80%"
              />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3">
              <el-radio v-model="radio" :span="3" disabled label="rtmp" title="rtmp需要flash支持"> rtmp</el-radio>
            </el-col>
            <el-col :span="21">
              <el-input
                v-model="mediaObject.rtmp"
                :readonly="true"
                :span="9"
                prefix-icon="el-icon-video-camera"
                size="mini"
                style="width:80%"
              />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3">当前播放地址</el-col>
            <el-col :span="21">
              <el-input
                v-model="currentMrl"
                :readonly="true"
                :span="9"
                prefix-icon="el-icon-video-camera"
                size="mini"
                style="width:100%"
              />
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row>
            <el-col :span="6">设备id:</el-col>
            <el-col :span="18">{{ mediaObject.deviceid }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">通道id:</el-col>
            <el-col :span="18">{{ mediaObject.channel_id }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">播放状态:</el-col>
            <el-col :span="18">{{ state }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">本地录像:</el-col>
            <el-col :span="18">{{ mediaObject.recording }}</el-col>
          </el-row>
          <el-row v-if="mediaObject.recording">
            <el-col :span="6">当前录像:</el-col>
            <el-col :span="18">{{ mediaObject.recordFilePath }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">录像日期</el-col>
            <el-col :span="18"><el-date-picker
              v-model="selectedDate"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              @change="handleDateChange"
            /></el-col>
          </el-row>
          <el-row>
            <el-col style="max-height: 400px;overflow-y:auto">
              <!--              加行的点击事件-->
              <el-table :data="recordFiles" border stripe @row-click="playRecord">
                <el-table-column prop="start" label="时间" />
                <el-table-column prop="duration" label="时长" width="70" />
                <el-table-column prop="size" label="大小" width="70">
                  <template slot-scope="scope">
                    {{ Math.round(parseInt(scope.row.size)/(1024*1024)) }}M
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-collapse style="display:none">
            <el-collapse-item title="控制">
              <el-row>
                <el-col :span="8">
                  <el-button class="el-icon-top-left" size="mini" type="info" @click="control('top-left')" />
                </el-col>
                <el-col :span="8">
                  <el-button class="el-icon-top" size="mini" type="info" @click="control('top')" />
                </el-col>
                <el-col :span="8">
                  <el-button class="el-icon-top-right" size="mini" type="info" @click="control('top-right')" />
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-button class="el-icon-back" size="mini" type="info" @click="control('left')" />
                </el-col>
                <el-col :span="8">
                  <el-button class="el-icon-full-screen" size="mini" type="info" @click="control('no')" />
                </el-col>
                <el-col :span="8">
                  <el-button class="el-icon-right" size="mini" type="info" @click="control('right')" />
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-button class="el-icon-bottom-left" size="mini" type="info" @click="control('bottom-left')" />
                </el-col>
                <el-col :span="8">
                  <el-button class="el-icon-bottom" size="mini" type="info" @click="control('bottom')" />
                </el-col>
                <el-col :span="8">
                  <el-button class="el-icon-bottom-right" size="mini" type="info" @click="control('bottom-right')" />
                </el-col>
              </el-row>
            </el-collapse-item>
            <el-collapse-item title="变焦">
              <el-row>
                <el-col :span="2" />
                <el-col :span="10" align="center">
                  <el-button class="el-icon-plus" size="mini" type="info" @click="zoom(1)" />
                </el-col>
                <el-col :span="10" align="center">
                  <el-button class="el-icon-minus" size="mini" type="info" @click="zoom(0)" />
                </el-col>
                <el-col :span="2" />
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { zoom } from '@/api/channel'
import moment from 'moment'
import { listRecordFiles } from '@/api/zlMediaKit'
import { Player } from '@/utils/executor'

const TAG = '[预览视频]'
export default {
  props: {
    show: Boolean,
    mediaType: {
      type: String,
      // gb28181 或 proxy:拉流代理
      default: 'gb28181'
    },
    mediaObject: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 离开路由
    leaveRouter: Boolean,
    // 是否切换设备
    changeVideo: Boolean

  },
  data() {
    return {
      radio: 'flv',
      visible: false,
      player: null,
      // 播放状态
      state: '',
      selectedDate: moment().format('YYYY-MM-DD'),
      recordFiles: [],
      // 当前在播放
      currentMrl: ''
    }
  },
  computed: {
    internalChangeVideo: {
      get() {
        return this.changeVideo
      },
      set(val) {
        this.$emit('update:changeVideo', val)
      }
    }
  },
  watch: {
    show() {
      this.visible = this.show
      this.canShow = false
      const that = this
      this.mrl = this.mediaObject.flv
      if (that.visible) {
        this.$nextTick(() => {
          that.play(this.mediaObject.flv)
          that.queryRecordFiles()
        })
      }
    },
    mediaObject(val) {
      if (val) {
        this.internalChangeVideo = true
      }
    }
  },
  methods: {
    play(url) {
      this.currentMrl = url
      const that = this
      this.canShow = true
      console.info(TAG, '初始化播放器', url)
      const player = new Player()
      player.init(url)
      this.instance = player.instance

      player.instance.onLoadFinish = () => {
        const mediaInfo = player.instance.mediaInfo()
        console.log(TAG, 'onLoadFinish', mediaInfo)
        this.fps = mediaInfo.meta.fps
        this.isHEVC = mediaInfo.meta.isHEVC
        this.size = mediaInfo.meta.size
        this.videoCodec = mediaInfo.meta.videoCodec === 0 ? 'HEVC/H.265' : '其它'
        that.playing = true
      }
      player.instance.onPlayFinish = () => {
        console.log(TAG, 'onPlayFinish')
      }
      player.instance.do()
    },
    control() {
      // control(z).then((ret) => {
      //   this.$message(ret.message)
      // })
    },
    zoom(z) {
      zoom(z).then((ret) => {
        this.$message(ret.message)
      })
    },
    remove() {
      console.log(TAG, '移除播放器')
      this.instance.pause()
      this.instance.release()
    },
    queryRecordFiles() {
      console.info(TAG, '媒体对象', this.mediaObject)
      const that = this
      listRecordFiles({
        camera_id: this.mediaObject.camera_id,
        date: this.selectedDate,
        mediaType: this.mediaType,
        deviceid: this.mediaObject.deviceid,
        channelid: this.mediaObject.channel_id
      }).then(ret => {
        console.log(TAG, '录像文件', ret)
        that.recordFiles = ret.data
      })
    },
    handleClose(done) {
      this.remove()
      this.$emit('update:show', false)
      done()
    },
    playRecord(row) {
      console.log(TAG, '播放录像', row.flv)
      this.remove()
      this.play(row.flv)
    },
    handleDateChange(newDate) {
      this.selectedDate = moment(newDate).format('YYYY-MM-DD')
      this.queryRecordFiles()
    }
  }
}
</script>

